<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="$t('checklistDetails')"
    width="60%"
  >
    <!-- 懒得循环一把梭了 -->
    <ul class="form-box">
      <li class="form-item">
        <span class="form-label">{{ $t('formNo') }}:</span>
        <span class="form-value">{{ form.checkFormNo }}</span>
      </li>
      <li class="form-item">
        <span class="form-label">{{ $t('checkOpportunity') }}:</span>
        <span class="form-value">{{ form.checkOpportunityName }}</span>
      </li>
      <li class="form-item">
        <span class="form-label">{{ $t('FormName') }}:</span>
        <span class="form-value">{{ form.checkFormName }}</span>
      </li>
      <li class="form-item">
        <span class="form-label">{{ $t('formVersion') }}:</span>
        <span class="form-value">{{ form.checkFormVer }}</span>
      </li>
      <li class="form-item">
        <span class="form-label">{{ $t('machine') }}:</span>
        <span class="form-value">{{ form.eqp_Name }}</span>
      </li>
      <li class="form-item">
        <span class="form-label">{{ $t('formStatus') }}:</span>
        <span :style="{'color': form.formStatus ? '#67C23A': '#F56C6C'}" class="form-value">
          {{ form.formStatus ? $t('Successful'): $t('Failed') }}
        </span>
      </li>
      <li class="form-item">
        <span class="form-label">{{ $t('EnumCheckItemFinalResult_Result') }}:</span>
        <span class="form-value">{{ form.formStatusStr }}</span>
      </li>
    </ul>
    <dynTable
      :loading="false"
      :table-data="tableDataCheckItem"
      :table-columns="tableColumnsCheckItem"
    />
    <el-row style="marginTop: 20px">
      <dynTable
        :loading="false"
        :table-data="tableDataTest"
        :table-columns="tableColumnsTest"
      />
    </el-row>
  </el-dialog>
</template>

<script>
import { getDetails, getItemListById } from '@/api/checkManagement/checkhistory'
export default {
  name: 'CheckhistoryDetail',
  data() {
    return {
      dialogVisible: false,
      form: {},
      tableDataCheckItem: [],
      listQuery: {
        page: 1,
        size: 10
      },
      tableColumnsCheckItem: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'itemName', label: this.$t('itemName') },
        { prop: 'itemValue', label: this.$t('itemValue') }
      ],
      tableDataTest: [],
      tableColumnsTest: [
        { prop: 'sampleID', label: this.$t('sampleTubeNo') },
        { prop: 'binNo', label: this.$t('BinNumber') },
        { prop: 'sampleItemName', label: this.$t('testItem') },
        { prop: 'min', label: this.$t('lowerLimit') },
        { prop: 'containMin', label: this.$t('includesLowerLimit'), templete: (_scope) => {
          return (
            <el-switch
              v-model={_scope.row.containMin}
              active-value={1}
              inactive-value={0}
              active-color={'#13ce66'}
              inactive-color={'#ff4949'}
              disabled/>
          )
        } },
        { prop: 'max', label: this.$t('upperLimit') },
        { prop: 'containMax', label: this.$t('includesUpperLimit'), templete: (_scope) => {
          return (
            <el-switch
              v-model={_scope.row.containMax}
              active-value={1}
              inactive-value={0}
              active-color={'#13ce66'}
              inactive-color={'#ff4949'}
              disabled/>
          )
        } },
        { prop: 'value', label: this.$t('testValue') }
      ]
    }
  },
  methods: {
    handleOpen(row) {
      if (row && row.id) {
        this.form = row
        getDetails({ formId: row.id }).then(res => {
          this.tableDataTest = res.data
        })
        getItemListById({ formId: row.id }).then(res => {
          this.tableDataCheckItem = res.data
        })
      }
      this.dialogVisible = true
    },
    doSave() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            // doUpdate(this.$clearNull({ ...this.infoForm, sblSpecList: filtertable })).then(res => {
            //   this.$betterTips(res, this.handleClose, this.handleUpdate)
            // })
          } else {
            // doAdd(this.$clearNull({ ...this.infoForm, sblSpecList: filtertable })).then(res => {
            //   this.$betterTips(res, this.handleClose, this.handleUpdate)
            // })
          }
        }
      })
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    }
  }
}
</script>
<style lang="scss" scoped>
.form-box {
    width: 100%;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    .form-item {
        width: 50%;
        padding: 10px 0;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        .form-label{
            width: 120px;
            font-size: 18px;
            font-weight: bold;
            text-align: right;
        }
        .form-value {
            font-size: 16px;
            padding-left: 6px;
        }
    }
}
</style>
